@config.main("Enrichment") {

    <div class="body-box">
        <div class="page-box">

            @config.subTitle("Enrichment")

            <div class="main-body">

                <form class="registration-form col-sm-12 my-form" id="form">

                    <div class="row">

                        @components.radio("Method", "method", "kegg", Seq(("kegg", "KEGG"), ("go" -> "GO")), labelBox = "3")

                        @components.radio("Species", "species", "XJDY", Seq(("XJDY", "XJDY Genome"), ("ZMNO" -> "ZMNO Genome"), ("MSAE", "MSAE Genome"), ("MTRU" -> "MTRU Genome")), labelBox = "3")

                        @components.textarea("Enter gene id", "id", "id", "getExample()")

                        @components.text("P-value cutoff", "pval", "0.05", label = "3")

                    </div>

                    <div class="col-md-12 form-group">
                        <label class="col-sm-3"></label>
                        <button type="button" class="btn my-btn" style="width: 200px" onclick="Search()">
                            Run</button>
                    </div>
                </form>

                <div id="result" style="display: none;">
                    <hr>
                    <h5>Result:</h5>
                    <table class="table table-bordered" id="keggTable" data-pagination="true" data-search="true"
                    data-toolbar="#toolbar" data-page-list="[10]" data-search-align="left"
                    data-multiple-search="true"
                    data-show-export="true" data-export-types="['excel','txt']" data-export-data-type="all"
                    style="word-wrap: break-word;
                        display: none">
                        <thead>
                            <tr>
                                <th data-field="term" data-sortable="true">Term</th>
                                <th data-field="database" data-sortable="true">Database</th>
                                <th data-field="id" data-sortable="true">ID</th>
                                <th data-field="input_num" data-sortable="true">Input number</th>
                                <th data-field="back_num" data-sortable="true">Background number</th>
                                <th data-field="p-value" data-sortable="true">P-Value</th>
                                <th data-field="correct_pval" data-sortable="true">Corrected P-Value</th>
                                <th data-field="input" data-sortable="true">Input</th>
                                <th data-field="hyperlink" data-sortable="true">Hyperlink</th>
                            </tr>
                        </thead>
                    </table>

                    <table class="table table-bordered" id="goTable" data-pagination="true" data-search="true"
                    data-toolbar="#toolbar" data-page-list="[10]" data-search-align="left"
                    data-multiple-search="true"
                    data-show-export="true" data-export-types="['excel','txt']" data-export-data-type="all"
                    style="word-wrap: break-word;
                        display: none">
                        <thead>
                            <tr>
                                <th data-field="id" data-sortable="true">ID</th>
                                <th data-field="enrichment" data-sortable="true">Enrichment</th>
                                <th data-field="description" data-sortable="true">Description</th>
                                <th data-field="ratio_in_study" data-sortable="true">Ratio_In_Study</th>
                                <th data-field="ratio_in_pop" data-sortable="true">Ratio_In_Pop</th>
                                <th data-field="p_uncorrected" data-sortable="true">P_Uncorrected</th>
                                <th data-field="p_bonferroni" data-sortable="true">P_Bonferroni</th>
                                <th data-field="p_holm" data-sortable="true">P_Holm</th>
                                <th data-field="p_sidak" data-sortable="true">P_Sidak</th>
                                <th data-field="p_fdr" data-sortable="true">P_Fdr</th>
                                <th data-field="namespace" data-sortable="true">Namespace</th>
                                <th data-field="genes_in_study" data-sortable="true">Genes_In_Study</th>
                            </tr>
                        </thead>
                    </table>
                </div>

            </div>
        </div>
    </div>

    <script>

            $(function () {
                formValidation()
            })

            function Search() {

                let form = $("#form");
                let fv = form.data("formValidation");
                fv.validate();
                if (fv.isValid()) {
                    let index = MyTable.prototype.runningIcon();

                    $.ajax({
                        url: "@routes.ToolsController.toolsRun("enrich")",
                        type: "post",
                        dataType: "json",
                        processData: false,
                        contentType: false,
                        data: new FormData($("#form")[0]),
                        success: function (data) {
                            if (data.valid === "false") {
                                swal("Error", data.msg, "error");
                            } else {
                                $("#keggTable").hide();
                                $("#goTable").hide();
                                let method = $("input[name=method]:checked").val()
                                let $table = $(`#${method}Table`)
                                $table.bootstrapTable("destroy")
                                $table.bootstrapTable({data: data.data})
                                $table.show()
                                const $result = $("#result");
                                $result.show()
                                let target_top = $result.offset().top - 80;
                                $("html,body").animate({scrollTop: target_top}, 800);
                            }
                            layer.close(index)
                        }
                    });
                }
            }

            function getExample() {
                let db = $("input[name=species]:checked").val()
                $.post("/hordeum/tools/getGeneNameExample/" + db, (data) => {
                    $("#id").val(data)
                })

            }

            function formValidation() {
                $('#form').formValidation({
                    framework: 'bootstrap',
                    icon: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        id: {
                            validators: {
                                notEmpty: {
                                    message: 'This is not be empty!'
                                }
                            }
                        },
                        pval: {
                            validators: {
                                notEmpty: {
                                    message: 'This is not be empty!'
                                },
                                numeric: {
                                    message: 'The p-value must be a number!'
                                }
                            }
                        }
                    }
                });
            }



    </script>
}